<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>${template.template!} 啤酒节门票选择桌号</title>
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/js/modules/h5/css/css.css">
    <script src="${request.contextPath}/statics/js/modules/h5/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            getArea();
            getRow();
        })


        //获取区号
        function getArea(){

            jQuery.ajaxSettings.async = false;
            jQuery.get('getArea?tid=${tid!}&ly=${ly!}',
                {},
                function (data) {
                    if (data.code == 0) {
                        $("#area").append('<option value="">请选择区号</option>');
                        if(data.aArea>0){
                            $("#area").append('<option value="A区">A区</option>');
                        }
                        if(data.bArea>0){
                            $("#area").append('<option value="B区">B区</option>');
                        }
                    }
                },
                'json'
            );

            jQuery.ajaxSettings.async = true;

        }

        //获取排号
        function getRow() {
            $("#table_row").html('');
            $("#table_num").html('');

            var area = $('#area option:selected').text();
            jQuery.ajaxSettings.async = false;
            jQuery.get('getRow?tid=${tid!}&ly=${ly!}&type=1&area=' + area,
                {},
                function (data) {
                    if (data.code == 0) {
                        var list  = data.list;
                        $("#table_row").append('<option value="">请选择排号</option>');
                        for(var i=0;i<list.length;i++) {
                            $("#table_row").append('<option value="'+list[i]+'">'+list[i]+'</option>');
                        }
                        getNum();
                    }
                },
                'json'
            );
            jQuery.ajaxSettings.async = true;
        }

        //获取桌号
        function getNum() {
            $("#table_num").html('');

            var area = $('#area option:selected').text();
            var row = $('#table_row option:selected').text();
            jQuery.ajaxSettings.async = false;
            jQuery.get('getNum?tid=${tid!}&ly=${ly!}&type=1&area=' + area+"&table_row="+row,
                {},
                function (data) {
                    if (data.code == 0) {
                        var list  = data.list;
                        $("#table_num").append('<option value="">请选择桌号</option>');
                        for(var i=0;i<list.length;i++) {
                            $("#table_num").append('<option value="'+list[i]+'">'+list[i]+'</option>');
                        }
                        getSeatNum();
                    }
                },
                'json'
            );
            jQuery.ajaxSettings.async = true;
        }

        //获取剩余票数
        function getSeatNum() {
            var area = $('#area option:selected').text();
            var row = $('#table_row option:selected').text();
            var num = $('#table_num option:selected').text();

            $.ajax({
                type: "GET",
                url: 'seatnum?tid=${tid!}&ly=${ly!}',
                contentType: "application/json",
                data: {area:area,table_row:row,table_num:num},
                success: function(r){
                    if(r.code === 0){
                        $('#count').text(r.result.seatnum);
                    }
                }
            });
        }

        $(document).ready(function () {
            $("#submitMobile").click(mobileClick);
        })

        var mobileClick = function () {
            var count = $('#count').text()*1;
            if ( count>0 ) {
                return true;
            }else{
                alert("当前桌号已无剩余座位！");
            }
            return false;
        }

        var msg = "${msg!}";
        if (msg.length > 0) {
            alert(msg);
        }
    </script>
</head>

<body>
<!--header start-->
<div class="header">
    <img src="/statics/js/modules/h5/logo/beer_t.jpg" class="img_pc"/>
    <img src="/statics/js/modules/h5/logo/beer_t.jpg" class="img"/>
</div>
<!--header end-->

<!--main start-->
<div class="zc_main">
    <div class="zc_one">
        啤酒节门票选桌
    </div>
    <!--中文-->
    <form method="post" action="doseat?tid=${tid!}&ly=${ly}" id="f1">

        <input type="hidden" name="mid" value="${mid!}"/>
        <input type="hidden" name="mobile" value="${mobile!}"/>

        <ul class="zc_three">
            <li>
                <span>区域：</span>
                <select name="area" type="select" id="area" class="txt txt_tell" onchange="getRow()">
                </select>
            </li>
            <li>
                <span>排号：</span>
                <select name="table_row" type="select" id="table_row" class="txt txt_tell" onchange="getNum()">
                </select>
            </li>
            <li>
                <span>桌号：</span>
                <select name="table_num" type="select" id="table_num" class="txt txt_tell" onchange="getSeatNum()">
                </select>
            </li>
            <li>
                <span>&nbsp;</span>
                当前桌号剩余座位数:<label id="count">-</label>
            </li>
            <li>
                <input type="submit" name="submitMobile" value="确认选桌" id="submitMobile" class="btn_next"/>
            </li>
            <li>
            </li>
        </ul>
    </form>

</div>
<!--main end-->


<!--footer start-->
<footer>
    <img src="/statics/js/modules/h5/logo/beer_f.jpg" class="img_pc"/>
    <img src="/statics/js/modules/h5/logo/beer_f.jpg" class="img"/>
</footer>
<!--footer end-->

<style>
    ul, ul li {
        list-style: none;
        margin: 0px;
        padding: 0px;
        color: #2d889b;
    }

    * {
        font-family: Microsoft Yahei;
        margin: 0px;
        padding: 0px;
        color: ${template.colorBg!};
    }

    a:hover {
        text-decoration: none;
        color: ${template.colorBg!};
    }

    .sy_four .nei .a:hover, .sy_six .ul li h1 a:hover, .sy_six .amore:hover, .sy_nine .left a:hover, .footer_one li h1 a:hover, .footer_one li p a:hover, .footer_four .right a:hover {
        color: #39F
    }

    .zc_three li .btn_next:hover, .zc_three li .btn_yzm:hover, .ll_one li .btn:hover, .dy_one li .btn:hover {
        background: ${template.colorBg!};
    }

    /* page1 */
    .page1 {
        width: 1030px;
        margin: 0 auto;
    }

    .page1 ul {
        float: left;
        width: 100%;
        margin-bottom: 60px;
    }

    .page1 ul li {
        float: left;
        width: 430px;
        margin: 0px 40px;
        margin-top: 50px;
    }

    .page1 ul li a {
        float: left;
        width: 95%;
        height: 87px;
        border-radius: 100px;
        border: 1px solid #2d889b;
        border-left: 0px;
        background: #E8E8E8;
        text-align: center;
        font-size: 32px;
        color: #2d889b;
        line-height: 34px;
        padding-top: 15px;
        padding-right: 5%
    }

    .page1 ul li a img {
        float: left;
        margin-top: -15px;
    }

    .page1 ul li a span {
        font-size: 18px;
        color: #2d889b
    }

    .page1 ul li a.sel {
        background: #2d889b;
        color: #fff;
    }

    .page1 ul li a.sel span {
        color: #fff;
    }

    @media screen and (min-width: 768px) and (max-width: 992px) {
        /* 平板 */
        .page1 {
            width: 90%;
            margin-left: 5%;
            float: left;
        }

        .page1 ul li {
            width: 44%;
            margin: 0px 3%;
            margin-top: 40px;
        }

        .page1 ul li a {
            height: 60px;
            padding-top: 10px;
            font-size: 20px;
            line-height: 26px;
        }

        .page1 ul li a span {
            font-size: 15px;
        }

        .page1 ul li a img {
            height: 70px;
            margin-top: -10px;
        }
    }

    @media (max-width: 767px) {
        /* 手机 */
        .page1 {
            width: 70%;
            margin-left: 15%;
            float: left;
            padding-top: 0px;
            padding-bottom: 0;
        }

        .page1 ul li {
            width: 100%;
            margin: 0px;
            margin-top: 20px;
        }

        .page1 ul li a {
            height: 47px;
            padding-top: 7px;
            font-size: 16px;
            line-height: 20px;
        }

        .page1 ul li a span {
            font-size: 12px;
        }

        .page1 ul li a img {
            height: 54px;
            margin-top: -7px;
        }

        .page1 ul {
            margin-bottom: 0
        }
    }

    /* 注册 zc */
    .zc_main {
        width: 680px;
        margin: 0px auto;
    }

    .zc_one {
        float: left;
        width: 100%;
        padding: 30px 0px;
        text-align: center;
        font-size: 34px;
        color: #000000;
        line-height: 30px;
    }

    .zc_one span {
        font-size: 21px;
        color: ${template.colorBg!};
    }

    .zc_two {
        float: left;
        width: 100%;
        border-bottom: 1px solid ${template.colorBg!};
        text-align: center;
    }

    .zc_two li {
        display: inline-block;
        width: 200px;
        height: 70px;
        text-align: center;
        line-height: 70px;
        border: 1px solid ${template.colorBg!};
        border-bottom: 0px;
        margin: 0px 10px;
        color: #2d889b;
        font-size: 24px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        background: #E8E8E8;
        cursor: pointer;
    }

    .zc_two li.sel {
        background: ${template.colorBg!};
        color: #E8E8E8
    }

    .zc_two li.sel a i {
        color: #E8E8E8;
        font-family: Microsoft Yahei;
    }

    .zc_three {
        float: left;
        width: 88%;
        margin-left: 6%;
        padding: 40px 0px;
    }

    .zc_three li {
        float: left;
        width: 100%;
        padding: 15px 0px;
    }

    .zc_three li span {
        float: left;
        line-height: 60px;
        color: #000000;
        font-size: 24px;
        padding-right: 10px;
    }

    .zc_three li .txt {
        border: 1px solid #000000;
        padding-left: 70px;
        float: left;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
    }

    .zc_three li .txt::-webkit-input-placeholder {
        color: #E8E8E8;
    }

    .zc_three li .txt:-moz-placeholder {
        color: #E8E8E8;
    }

    .zc_three li .txt::-moz-placeholder {
        color: #E8E8E8;
    }

    .zc_three li .txt:-ms-input-placeholder {
        color: #E8E8E8
    }

    .zc_three li .txt_tell {
        float: left;
        width: 396px;
        background: url(../images/bg_01.png) no-repeat left center;
    }

    .zc_three li .txt_yzm {
        float: left;
        width: 196px;
        background: url(../images/bg_02.png) no-repeat left center;
    }

    .zc_three li .txt_xin {
        float: left;
        width: 196px;
        background: url(../images/bg_03.png) no-repeat left center;
    }

    .zc_three li .img_yzm {
        float: left;
        margin-left: 20px;
        height: 60px;
    }

    .zc_three li .btn_yzm {
        float: left;
        margin-left: 20px;
        background: ${template.colorBg!};
        height: 62px;
        line-height: 62px;
        cursor: pointer;
        color: #fff;
        font-size: 20px;
        width: 180px;
    }

    .zc_three li .btn_next {
        float: left;
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: #ffa200;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
    }

    .zc_four {
        float: left;
        width: 100%;
        border-top: 1px solid ${template.colorBg!};
        padding: 20px 0px;
        text-align: center;
        color: ${template.colorBg!};
        font-size: 20px;
        line-height: 30px;
    }

    @media screen and (min-width: 768px) and (max-width: 992px) {
        /* 平板 */
        .zc_one {
            font-size: 30px;
        }

        .zc_one span {
            font-size: 18px;
        }

        .zc_two li {
            height: 60px;
            line-height: 60px;
            font-size: 20px;
        }
    }

    @media (max-width: 767px) {
        /* 手机 */
        .zc_main {
            float: left;
            width: 90%;
            margin-left: 5%
        }

        .zc_one {
            font-size: 20px;
            line-height: 20px;
            padding: 20px 0px;
        }

        .zc_one span {
            font-size: 12px;
        }

        .zc_two li {
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            width: 110px;
            margin: 0px 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .zc_three {
            float: left;
            width: 100%;
            margin: 0px;
            padding: 5px 0px;
        }

        .zc_three li {
            width: 100%;
            padding: 9px 0px;
        }

        .zc_three li span {
            float: left;
            width: 25%;
            font-size: 14px;
            padding: 0;
            line-height: 40px;
        }

        .zc_three li .txt {
            line-height: 40px;
            height: 40px;
            font-size: 13px;
        }

        .zc_three li .txt_tell {
            width: 64%;
            padding-left: 10%;
            background-size: 40px;
        }

        .zc_three li .txt_yzm {
            width: 35%;
            padding-left: 10%;
            background: url(../images/bg_02.png) no-repeat 0px center;
            background-size: 24px;
        }

        .zc_three li .img_yzm {
            margin: 0px;
            width: 25%;
            float: right;
            height: 40px;
        }

        .zc_three li .txt_xin {
            width: 35%;
            padding-left: 10%;
            background-size: 32px;
        }

        .zc_three li .btn_yzm {
            width: 27%;
            float: right;
            height: 42px;
            line-height: 42px;
            font-size: 13px;
            margin: 0px;
        }

        .zc_three li .btn_next {
            height: 40px;
            line-height: 40px;
            font-size: 14px;
        }

        .zc_four {
            font-size: 13px;
            line-height: 22px;
            padding: 10px 0px;
        }

        .zc_four img {
            width: 20px;
        }
    }

    /* 联络信息 ll */
    .main {
        width: 680px;
        margin: 0px auto;
    }

    .ll_one {
        float: left;
        width: 100%;
        padding: 30px 0px;
    }

    .ll_one li {
        float: left;
        width: 100%;
        padding-top: 20px;
        line-height: 60px;
        font-size: 22px;
        color: #2d889b;
    }

    .ll_one li span {
        float: left;
        width: 15%;
        font-size: 22px;
        color: #2d889b;
    }

    .ll_one li .txt {
        float: left;
        width: 81%;
        padding-left: 3%;
        border: 1px solid #2d889b;
        line-height: 60px;
        font-size: 22px;
        color: #2d889b;
    }

    .ll_one li .txt::-webkit-input-placeholder {
        color: #E8E8E8;
    }

    .ll_one li .txt:-moz-placeholder {
        color: #E8E8E8;
    }

    .ll_one li .txt::-moz-placeholder {
        color: #E8E8E8;
    }

    .ll_one li .txt:-ms-input-placeholder {
        color: #E8E8E8
    }

    .ll_one li label {
        cursor: pointer;
        margin-right: 30px;;
        color: #2d889b;
    }

    .ll_one li label input {
        width: 20px;
        height: 20px;
    }

    .ll_one li .txt3 {
        width: 16%
    }

    .ll_one li .txt2 {
        width: 38.5%;
        margin: 0px 2%;
    }

    .ll_one li .select {
        float: left;
        border: 1px solid #2d889b;
        line-height: 60px;
        font-size: 22px;
        color: #2d889b;
        height: 60px;
        margin-right: 10px;
        width: 26%;
        padding: 0px 5px;
    }

    .ll_one li .sel_qu {
        width: 29.5%;
        margin-right: 0
    }

    .ll_one .li, .dy_one .li {
        text-align: center;
    }

    .ll_one li .btn, .dy_one li .btn, .tx_four .btn {
        height: 60px;
        font-size: 22px;
        background: #2d889b;
        color: #fff;
        padding: 0px 25px;
    }

    @media (max-width: 767px) {
        /* 手机 */
        .main {
            width: 92%;
            margin-left: 4%;
            float: left;
        }

        .ll_one {
            padding: 0px;
            padding-top: 10px;
            padding-bottom: 20px;
        }

        .ll_one li {
            padding-top: 10px;
            line-height: 36px;
            font-size: 14px;
        }

        .ll_one li span {
            font-size: 14px;
            line-height: 36px;
            width: 18%;
        }

        .ll_one li .txt {
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            width: 77.5%;
            padding-left: 3.5%;
        }

        .ll_one li label input {
            width: 15px;
            height: 15px;
            float: left;
            margin-top: 10px;
            margin-right: 4px;
        }

        .ll_one li label {
            margin-right: 15px;
            float: left;
        }

        .ll_one li .txt3 {
            width: 15%
        }

        .ll_one li .txt2 {
            width: 34.5%;
            margin: 0px 1.5%;
        }

        .ll_one li .select {
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            width: 26%;
            margin-right: 1%
        }

        .ll_one li .sel_qu {
            width: 28%;
            margin-right: 0
        }

        .ll_one li .btn, .dy_one li .btn, .tx_four .btn {
            padding: 0px 20px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
        }
    }

    /* 调研信息 dy */
    .dy_one {
        float: left;
        padding-top: 40px;
        width: 90%;
        margin-left: 5%;
    }

    .dy_one li {
        float: left;
        width: 100%;
        padding-bottom: 40px;
    }

    .dy_one li .top {
        float: left;
        width: 100%;
        background: #E8E8E8;
        color: #2d889b;
        font-size: 24px;
        line-height: 60px;
    }

    .dy_one li .top i {
        float: left;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        background: #2d889b;
        font-size: 48px;
        color: #E8E8E8;
        font-style: inherit;
        border-right: 10px solid #fff;
    }

    .dy_one li .top span {
        padding-left: 15px;;
        color: #2d889b;
    }

    .dy_one li .bottom {
        float: left;
        width: 100%;
        padding-top: 15px;
    }

    .dy_one li label {
        float: left;
        width: 110%;
        line-height: 50px;
        font-size: 20px;
        color: #2d889b;
        cursor: pointer;
    }

    .dy_one li label input {
        width: 24px;
        height: 24px;
        float: left;
        margin-left: 100px;
        margin-top: 14px;
        margin-right: 10px;
    }

    .dy_one li .btn {
        width: 40%;
        margin: 0px 20px;
        background: #2d889b;
        color: #fff;
    }

    @media screen and (min-width: 768px) and (max-width: 992px) {
        /* 平板 */
        .dy_one li .top {
            line-height: 50px;
            font-size: 20px;
        }

        .dy_one li .top i {
            height: 50px;
            width: 50px;
            line-height: 50px;
            font-size: 36px
        }

        .dy_one li label {
            font-size: 20px;
            line-height: 44px;
            width: 100%
        }

        .dy_one li label input {
            width: 20px;
            height: 20px;
        }

        .dy_one li .btn {
            font-size: 20px;
            line-height: 50px;
            height: 50px;
        }
    }

    @media (max-width: 767px) {
        /* 手机 */
        .dy_one {
            width: 100%;
            margin-left: 0%;
            padding-top: 20px;
        }

        .dy_one li {
            padding-bottom: 20px;
        }

        .dy_one li .top {
            line-height: 40px;
            font-size: 15px;
        }

        .dy_one li .top i {
            height: 40px;
            width: 40px;
            line-height: 40px;
            font-size: 26px;
            border-right: 5px solid #fff;
        }

        .dy_one li .top span {
            padding-left: 10px;
        }

        .dy_one li label {
            font-size: 20px;
            font-size: 12px;
            line-height: 20px;
            width: 100%
        }

        .dy_one li label input {
            width: 14px;
            height: 14px;
            margin-left: 50px;
            margin-top: 3px;
            margin-right: 5px;
            float: left;
            margin-bottom: 10px;
        }

        .dy_one li .btn {
            margin: 0px 5px;
            width: 45%;
            padding: 0px;
            font-size: 13px;
        }
    }

    /* 我的 wd */
    .wd_one {
        float: left;
        width: 80%;
        background: #2d889b;
        border-radius: 20px;
        margin: 50px 10%;
    }

    .wd_one h5 {
        float: left;
        font-weight: normal;
        font-size: 14px;
        letter-spacing: 20px;
        margin: 0px;
        line-height: 76px;
        color: #fff;
        text-align: center;
        width: 100%
    }

    .wd_one .img {
        float: left;
        width: 100%;
        text-align: center;
    }

    .wd_one .img img {
        width: 80%;
    }

    .wd_one .bottom {
        float: left;
        width: 100%;
        text-align: center;
        padding: 15px 0px;
        color: #fff;
        font-size: 24px;
        line-height: 40px;
        letter-spacing: 3px;
    }

    .wd_two {
        float: left;
        width: 100%;
        margin-left: 0%;
        margin-bottom: 20px;
    }

    .wd_two li {
        float: left;
        width: 42%;
        margin-left: 5%;
        margin-bottom: 25px;
    }

    .wd_two li a {
        float: left;
        width: 92%;
        padding-right: 8%;
        text-align: center;
        border: 1px solid #2d889b;
        height: 55px;
        border-radius: 100px;
        border-left: 0px;
        color: #2d889b;
        font-size: 24px;
        line-height: 22px;
        padding-top: 15px;
        background: #E8E8E8;
    }

    .wd_two li a img {
        float: left;
        margin-top: -16px;
    }

    .wd_two li a span {
        font-size: 13px;
        color: #2d889b;
    }

    .wd_two li a.sel {
        color: #fff;
        background: #2d889b
    }

    .wd_two li a.sel span {
        color: #fff;
    }

    .wd_three {
        float: left;
        width: 100%;
        text-align: center;
        padding-bottom: 15px;
        color: #2d889b;
        font-size: 24px;
        padding-top: 20px;
    }

    .txt_wd {
        float: left;
        width: 92%;
        border: 1px solid #2d889b;
        border-radius: 20px;
        padding: 20px 4%;
        height: 240px;
        line-height: 40px;
        font-size: 18px;
        color: #2d889b;
        margin-bottom: 40px;
        outline: none;
    }

    @media screen and (min-width: 768px) and (max-width: 992px) {
        /* 平板 */
        .wd_one {
            width: 60%;
            margin: 30px 20%;
        }

        .wd_one h5 {
            letter-spacing: 8px;
            font-size: 14px;
            line-height: 60px;
        }

        .wd_one .bottom {
            font-size: 20px;
            line-height: 30px;
            padding: 15px 0px;
        }
    }

    @media (max-width: 767px) {
        /* 手机 */
        .wd_one {
            width: 90%;
            margin: 30px 5%;
        }

        .wd_one h5 {
            letter-spacing: 4px;
            font-size: 12px;
            line-height: 50px;
        }

        .wd_one .bottom {
            font-size: 14px;
            line-height: 20px;
            padding: 6px 0px;
        }

        .wd_two li {
            width: 90%;
            margin: 0px;
            margin-left: 5%;
            margin-bottom: 20px;
            padding: 0px;
        }

        .wd_two li a {
            height: 42px;
            width: 92%;
            padding-top: 8px;
            font-size: 18px;
            line-height: 18px;
            padding-right: 8%;
        }

        .wd_two li a img {
            height: 50px;
            margin-top: -8px;
        }

        .wd_two li a span {
            font-size: 12px;
        }

        .wd_three {
            font-size: 16px;
            padding-bottom: 10px;
            padding-top: 10px;
        }

        .txt_wd {
            width: 92%;
            padding: 10px 4%;
            font-size: 13px;
            line-height: 24px;
            height: 140px;
        }
    }

    .qd_one {
        float: left;
        width: 83%;
        margin: 20px 0px;
        margin-left: 5%;
        border: 1px solid #2d889b;
        padding: 10px 3.5%;
        text-align: center;
    }

    .qd_one img {
        max-width: 100%;
        border-radius: 20px;
    }

    .dq_two {
        float: left;
        width: 100%;
        padding-top: 35px;
        background: url(../images/bg_04_1.png) no-repeat top center;
        background-size: auto 25px;
        color: #2d889b;
        font-size: 12px;
        padding-bottom: 20px;
        line-height: 20px;
        text-align: center;
    }

    .qd_three {
        float: left;
        width: 100%;
        text-align: center;
        padding-bottom: 20px;
    }

    .qd_three .btn {
        height: 34px;
        background: #2d889b;
        color: #fff;
        font-size: 14px;
        width: 35%;
        margin: 0px 10px;
    }

    /* 邀请 yq */
    .yq_one {
        float: left;
        width: 100%;
        padding-top: 80px;
        text-align: center;
        color: #2d889b;
        font-size: 28px;
        line-height: 60px;
        letter-spacing: 6px;
        padding-bottom: 10px;
    }

    .yq_two {
        color: #2d889b;
        float: left;
        width: 100%;
        background: url(images/bg_04.png) no-repeat top center;
        height: 200px;
        font-size: 32px;
        text-align: center;
        line-height: 36px;
    }

    .yq_two span {
        color: #2d889b;
        font-size: 18px;
        letter-spacing: 3px;
    }

    .yq_three {
        color: #2d889b;
        float: left;
        width: 100%;
        text-align: center;
        line-height: 70px;
        font-size: 36px;
        letter-spacing: 3px;
    }

    .yq_four {
        color: #2d889b;
        float: left;
        width: 80%;
        margin-left: 10%;
        margin-top: 40px;
        border: 1px solid #2d889b;
        border-radius: 20px;
        padding-bottom: 200px;
    }

    .yq_four .top {
        color: #2d889b;
        float: left;
        width: 100%;
        padding-top: 40px;
        line-height: 40px;
        font-size: 27px;
        letter-spacing: 24px;
        text-align: center;
        padding-bottom: 30px;
    }

    .yq_four .top span {
        color: #2d889b;
        font-size: 15px;
        letter-spacing: 3px
    }

    .yq_four .img {
        float: left;
        width: 100%;
        text-align: center;
    }

    .yq_four .img img {
        width: 50%
    }

    .yq_four .bottom {
        color: #2d889b;
        float: left;
        width: 100%;
        text-align: center;
        font-size: 14px;
        line-height: 30px;
        letter-spacing: 3px;
    }

    .yq_five {
        color: #2d889b;
        float: left;
        width: 90%;
        margin-left: 5%;
        background: url(images/bg_05.png) no-repeat left top;
        background-size: 100%;
        height: 360px;
        margin-top: -200px;
        text-align: center;
        font-size: 28px;
        letter-spacing: 15px;
        line-height: 40px;
        padding-top: 20px;
    }

    @media screen and (min-width: 768px) and (max-width: 992px) {
        /* 平板 */
        .yq_one {
            padding-top: 60px;
            font-size: 24px;
            line-height: 50px;
        }

        .yq_two span {
            font-size: 16px;
        }

        .yq_three {
            font-size: 32px;
            line-height: 60px;
        }
    }

    @media (max-width: 767px) {
        /* 手机 */
        .yq_one {
            padding-top: 10px;
            font-size: 15px;
            line-height: 20px;
            letter-spacing: 3px;
        }

        .yq_two {
            height: 90px;
            background-size: auto 100%;
            font-size: 20px;
            line-height: 22px;
        }

        .yq_two span {
            font-size: 12px;
            letter-spacing: 1px;
        }

        .yq_three {
            font-size: 15px;
            line-height: 24px;
            margin-top: 10px;
            letter-spacing: 2px;
        }

        .yq_four {
            padding-bottom: 100px;
            width: 84%;
            margin-left: 8%;
            margin-top: 10px;
        }

        .yq_four .top {
            font-size: 16px;
            letter-spacing: 10px;
            padding-top: 10px;
            line-height: 24px;
            padding-bottom: 5px;
        }

        .yq_four .top span {
            font-size: 12px;
        }

        .yq_four .img img {
            width: 50%
        }

        .yq_four .bottom {
            font-size: 12px;
            letter-spacing: 1px;
        }

        .yq_five {
            width: 100%;
            margin: 0px;
            margin-top: -100px;
            font-size: 16px;
            padding-top: 10px;
            line-height: 22px;
            letter-spacing: 5px;
            height: 210px;
            background-size: 100%;
        }
    }

    /* 头像 tx */
    .tx_one {
        float: left;
        width: 100%;
        padding-top: 80px;
        text-align: center;
    }

    .tx_one img {
        max-width: 55%;
        border-radius: 400px;
    }

    .tx_two {
        float: left;
        width: 100%;
        text-align: center;
        line-height: 80px;
        font-size: 24px;
        color: #2d889b;
        margin: 0px;
        font-weight: normal;
    }

    .tx_three {
        float: left;
        width: 80%;
        margin-left: 10%;
        line-height: 30px;
        color: #2d889b;
        font-size: 16px;
        padding-bottom: 40px;
    }

    .tx_four {
        float: left;
        width: 100%;
        text-align: center;
        padding-bottom: 60px;
    }

    .tx_four .btn {
        width: 40%;
        background: #2d889b;
        color: #fff;
    }

    @media screen and (min-width: 768px) and (max-width: 992px) {
        /* 平板 */
        .tx_four .btn {
            width: 60%;
        }
    }

    @media (max-width: 767px) {
        /* 手机 */
        .tx_one img {
            max-width: 36%;
            border-radius: 400px;
        }

        .tx_one {
            padding-top: 15px;
        }

        .tx_two {
            line-height: 40px;
            font-size: 15px;
        }

        .tx_three {
            width: 100%;
            padding: 0px;
            margin: 0px;
            font-size: 12px;
            line-height: 20px;
            padding-bottom: 15px;
        }

        .tx_four {
            padding-bottom: 20px;
        }

        .tx_four .btn {
            width: 45%
        }
    }

    /* 新加页面的css样式 */
    .dy_one .bottom .txt_yj {
        float: left;
        width: 78%;
        border: 1px solid #2d889b;
        height: 120px;
        line-height: 30px;
        font-size: 20px;
        margin-left: 100px;
        padding-left: 2%;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .dy_one .bottom .txt_sm {
        height: 30px;
        line-height: 30px;
        margin-top: 10px;
    }

    @media screen and (min-width: 768px) and (max-width: 992px) {
        /* 平板 */
    }

    @media (max-width: 767px) {
        /* 手机 */
        .dy_one .bottom .txt_yj {
            margin-left: 50px;
            height: 80px;
            font-size: 14px;
            line-height: 26px;
        }

        .dy_one .bottom .txt_sm {
            height: 32px;
            line-height: 32px;
            margin-top: 10px;
            padding: 0px;
            padding-left: 3%;
            font-size: 13px;
        }
    }
</style>

<div style="display:none">
    <script type="text/javascript" src="https://s5.cnzz.com/z_stat.php?id=1277709907&web_id=1277709907"></script>
</div>

</body>
</html>
